<template>
  <el-container class="home-container">
    <el-header>
      <div class="title">
        <img class="icon" src="./../assets/bg011.png" alt="">
        <span>精品咖啡后台管理系统</span>
      </div>
      <div class="flex-center">
        <span class="mr-10 font15">{{'欢迎你 '+getUserLevelName}}</span>
        <el-button type="primary" @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px':'200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu :default-openeds="defaultOpeneds" background-color="#333744" unique-opened text-color="#fff" active-text-color="#409EFF"
                 :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
          <el-submenu :index="item.name" v-for="(item,index) in menus" :key="index">
            <template slot="title">
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState( subItem.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
// @ is an alias to /src

import {getStore, setStore} from "js-utils";
import {Validate} from "js-utils/validate";
import {mapState} from "vuex";
import {getUserInfo} from "@/config/tools";

export default {
  name: 'HomeView',
  components: {
  },
  computed:{
    getUserLevelName(){
      if (Validate.isEmpty(this.userInfo)){
        return '';
      }
      if (this.userInfo.level === 1){
        return '超级管理员'
      }else if(this.userInfo.level ===2){
        return '管理员'
      }else if(this.userInfo.level ===3){
        return '注册用户'
      }else if(this.userInfo.level ===4){
        return '厨师'
      }
      return ''
    },
    userInfo(){
      return this.$store.state.userInfo||{};
    }
  },
  data(){
    return {
      menus :[{name:'首页设置',children:[{name:'轮播图设置',path:'/picSetting'}]},
        {name:'桌台管理',children:[{name:'桌台列表',path:'/boardList'}]},
        {name:'商品管理',children:[
            {name:'商品列表',path:'/orderingIndex'},
          ]},
      ],
      isCollapse:false,
      activePath:'',
      defaultOpeneds:['首页设置'] // 使用 default-openeds 属性
    }
  },
  created (){
    this.activePath = getStore('activePath');
    this.getInfo();
  },
  methods:{
    getInfo(){
      let dic = this.menus[2]
      let childrenArr = dic['children']
      childrenArr.push({name:'分类管理',path:'/cateIndex'});
      dic['childrenArr'] = childrenArr
      // this.menus.push( {name:'订单管理',children:[{name:'商品订单',path:'/orderList'},{name:'消费订单',path:'/scoreList'}]})
      // this.menus.push( {name:'用户管理',children:[{name:'用户管理',path:'/userIndex'},{name:'用户面板',path:'/userPanel'}]})
      this.menus.push( {name:'物流管理',children:[{name:'快递公司',path:'/expressIndex'}]})
      this.menus.push( {name:'优惠券管理',children:[{name:'券列表',path:'/ticket'},{name:'咖啡豆报表',path:'/beansData'}]})
      // getUserInfo().then(()=>{
      //   console.log(this.userInfo)
      //   if (!Validate.isEmpty(this.userInfo)){
      //     if(this.userInfo.level < 3){
      //       let dic = this.menus[1]
      //       let childrenArr = dic['children']
      //       childrenArr.push({name:'分类管理',path:'/cateIndex'});
      //       dic['childrenArr'] = childrenArr
      //       this.menus.push( {name:'订单管理',children:[{name:'商品订单',path:'/orderList'},{name:'消费订单',path:'/scoreList'}]})
      //       this.menus.push( {name:'用户管理',children:[{name:'用户管理',path:'/userIndex'},{name:'用户面板',path:'/userPanel'}]})
      //     }else if(this.userInfo.level === 3){
      //       let dic = this.menus[0]
      //       dic['name'] = '操作面板';
      //       (dic['children']).push({name:'用户面板',path:'/userPanel'});
      //       this.menus.push( {name:'订单管理',children:[{name:'商品订单',path:'/orderList'},{name:'消费订单',path:'/scoreList'}]})
      //     }else {
      //       let dic = this.menus[0]
      //       dic['name'] = '操作面板';
      //       (dic['children']) = [{name:'用餐管理',path:'/mealManager'}];
      //     }
      //   }else{
      //     this.logout()
      //   }
      // }).catch((err)=>{
      //   console.log(err)
      //   // this.logout()
      // })
    },
    logout(){
      setStore('token',null,true)
      setTimeout(()=>{
        this.$router.go(0)
      },300)
    },
    toggleCollapse(){
      this.isCollapse = !this.isCollapse

    },
    // 保存选中链接的值
    saveNavState(path){
      console.log(path)
      setStore('activePath',path)
      this.$router.push(path)
    }
  }
}
</script>
<style lang='scss'>
.icon{
  width: 50px;
  height: 50px;
}
.toggle-button{
  background-color: #4A5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;//鼠标放上去就有个小手
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 20px;

}
.title{
  display: flex;
  align-items: center;
  span {
    margin-left: 15px;
  }
}
.el-aside {
  background-color: #333744;
  .el-menu{
    border-right: 0;
  }
}

.el-main {
  background-color: #EAEDF1;
}
.home-container{
  height: 100%;
}

</style>